<template>
  <selectField 
    v-model="oValue"
    :keyName="keyName"
    :keyShow="keyShow"
    :size="size"
    :svc="svc"
    :urlPage="urlPage"
    :urlIds="urlIds"
    :isMultiple="isMultiple"
    :isBtn="isBtn"
    :style="style"
    :title="title"
    :label="label"
    :disabled="disabled"
    :params="params"
    :placeholder="placeholder">
    <template v-slot:selectItem="{item}">
      {{ `${item['username'] || ''}-${item['name'] || ''}` }}
    </template>
    <!-- <template v-slot:queryFrom="{listQuery,handleFilter}">
      <el-form-item prop="username" label="账号">
        <el-input v-model="listQuery['username']" placeholder="账号" @keyup.enter.native="handleFilter"/>
      </el-form-item>
      <el-form-item prop="name" label="姓名">
        <el-input v-model="listQuery['name']" placeholder="姓名" @keyup.enter.native="handleFilter"/>
      </el-form-item>
      <el-form-item prop="state" label="状态">
        <el-radio-group v-model="listQuery['state']" disabled>
          <el-radio-button label="" key="">全部</el-radio-button>
          <el-radio-button v-for="(item,index) in getEnumList('CommonEnableDisable')" :label="item.key" :key="index">{{item.value}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </template> -->
    <template  v-slot:queryTable="{item}">
      <div class="list-left">
        <div class="list-text"><span>{{ item.username }}</span></div>
        <div class="list-text"><span>{{ item.name }}</span></div>
        <!-- <span class="list-amount">¥{{ item.amount }}</span> -->
      </div>
      <div class="list-m">
        
        <EnumTag :enum-list="getEnumList('CommonEnableDisable')" :enum-key="item.state" />
      </div>
           
      <!-- <el-table-column align="center" prop="username" label="账号" />
      <el-table-column align="center" prop="name" label="姓名" />
      <el-table-column align="center" prop="state" label="状态">
        <template v-slot="{row}">
          <EnumTag :enum-list="getEnumList('CommonEnableDisable')" :enum-key="row.state" />
        </template>
      </el-table-column> -->
    </template>
  </selectField>
</template>

<script setup>
// import share from "@/views/components";
import selectField from '@/h5/components/selectField/index.vue'
import { ref, computed, watch } from 'vue'
import {commonEnableDisables, getEnumList, svc} from "@/config/common";

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  modelValue: {
    type: String
  },
  isBtn: {
    type: Boolean,
    default: false
  },
  label: {
    type: String
  },
  keyName: 'id',
  keyShow: 'name',
  isMultiple: {
    type: Boolean,
    default: false
  },
  size: {
    default: 'default'
  },
  style: {
    default: ''
  },
  title: {
    type: String
  },
  params: {
    type: Object,
    default: () => ({state: commonEnableDisables().enabled})
  },
  disabled: {
    type: Boolean,
    default: false
  },
})

let oValue = ref('')
const urlPage = '/user/page'
const urlIds = '/user/ids'

const emit = defineEmits(['update:modelValue']);

watch(() => [props.value, props.modelValue], vals => {
  if (vals[0]) {
    console.log('oValue.value--',oValue.value)
    emit('update:modelValue', oValue.value)
  }
  if(vals[1]) {
    console.log('oValue.value++++',oValue.value)
    oValue.value = val
  }
  }, {immediate: true, deep: true}
);

oValue.value = props.modelValue

getEnumList()

</script>
<style scoped lang="scss">
.list {
  width: 100%;
  height: calc( 100vh - 8rem);
  & ul {
    width: 100%;
    height: 100%;
    padding: 0 .625rem;
    scroll-behavior: smooth;
    overflow-y: auto;
    & li {
      border-bottom: 1px solid #C3C3C3;
      border-radius: 6px;
      margin: .625rem 0;
      background: #fff;
      padding: .625rem;
      box-shadow:0 0 5px var(--van-gray-5);
      position: relative;
      .list-left {
        display: flex;
        justify-content: space-between;
        // margin-top: .625rem;
       
      }
      .list-m {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-wrap: wrap;
        margin-top: .625rem;
        & span {
          color: 000;
          font-size: .875rem;
          border: 1px solid #000;
          padding: 0.1rem .5rem;
          display: inline-block;
          margin: 0 .3125rem;
          border-radius: 2px;
        }
      }
      .list-btn {
        display: flex;
        justify-content: flex-end;
        margin-top: .625rem;
      }
      & span {
        // color: #95d475;
        font-size: .875rem;
        font-weight: bold;
        // color: #000;
      }
    }
    & li.active {
      background: #fff1f1;
      box-shadow:0 0 5px #9b0f65;
    }
    .active-ico {
      position: absolute;
      left: 0;
      bottom: 0;
      background: #dfc059;
      color: #fff;
      border-radius: 50%;
    }
  }
}
.btns {
  width: 100%;
  // padding: 0 .625rem;
  overflow: hidden;
  position: fixed;
  bottom: 0.2rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-amount {
  padding: .3rem 0.8rem;
  border-radius: 30px;
  color: #fff;
  background: #dfc059;
  
}
.model-head {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 2rem;
  text-align: center;
}
.model-content {
  padding: 0 1.2rem;
}
.content {
  padding: .625rem 0;
  color: var(--van-gray-10);
  display: flex;
  // align-items: center;
}
.content span:nth-child(1) {
  display: inline-block;
  text-align: top;
  // width: 46%;
  min-width: 25%;
}
</style>
